<template>
  <div class="gap-4 grid-rows-24 row-start-1 row-end-6 row-span-1 row-auto row-span-2 row-span-3 row-span-4 row-span-5 row-span-6 col-span-1 col-span-2 col-span-3 col-span-4 col-span-5 col-span-6 col-span-7 col-span-8 col-span-9 col-span-10 col-span-11 col-span-12 col-span-13 col-span-14 col-span-15 col-span-16 col-span-17 col-span-18 col-span-19 col-span-20 col-span-21 col-span-22 col-span-23 col-span-24"></div>
</template>
<script lang="tsx">
import { defineComponent, inject } from 'vue'
import {charts} from "../config";
interface StyleVO {
  [key:string]: CSSStyleRule
}
export default defineComponent({
  name: 'DsGridLayout',
  props: {
    layouts: {
      type: Array,
      required: true
    }
  },
  setup(props, { slots }) {
    const { layouts } = props;
    const { theme } = inject<any>('Config')
    const render = (layouts: any, root?: string) => {
      return layouts.map((layout: any, index: number) => {
        if (Array.isArray(layout)) { // 渲染行
          let cls = `grid gap-${theme.gap}`
          if (root) {
            cls += ' grid-cols-24 px-5'
          }
          return <div class={cls}>{render(layout)}</div>
        }
        // 渲染列
        let cls, style, ret;
        if (layout.children) {
          style = layout.children.map(child => child.height || 'auto').filter(child => child)
          style = {
            'grid-template-rows': style.join(' ')
          }
        }
        if (layout.span) {
          cls = `grid gap-${layout.gap || theme.gap} col-span-${layout.span}`
        } else {
          cls = 'block'
        }
        ret = <>{slots[layout.slot] && (slots[layout.slot] as Function)()}
          {layout.children && render(layout.children)}</>
        return cls === 'block' ? ret : <div class={cls} style={style}>
          {ret}
        </div>
      })
    }
    let rootStyle: StyleVO
    if (theme.rows) {
      rootStyle = {
        'grid-template-rows': theme.rows.join(' ')
      }
    }
    return () => <div class={'h-full absolute inset-0 grid gap-' + theme.gap} style={rootStyle}>{render(layouts, 'root')}</div>
  }
})
</script>

